<template>
    <div v-loading="loading" class="bussiness-container">
        <!-- 筛选器 -->
        <filter-data @filterSubmit="filterSubmit" />
        <basics-card>
            <el-row :gutter="20" class="title-wrap">
                <el-col :span="2">
                    <strong class="strong-room">
                        管理面积
                        <i class="i-area">0㎡</i>
                    </strong>
                </el-col>
                <el-col :span="2">
                    <strong class="strong-room">
                        已出租
                        <i class="i">0㎡</i>
                    </strong>
                </el-col>
                <el-col :span="2"><span class="set">设置＞</span></el-col>
                <el-col :span="3">
                    <span class="bail">
                        保证金:
                        <i class="i-bail">0元＞</i>
                    </span>
                </el-col>
            </el-row>
            <bus-card :bgmData="[]" />
            <div class="tips-wrap">
                <span class="common-link">
                    收保证金
                    <i class="line">0元＞</i>
                </span>
                <span class="common-link">
                    退保证金
                    <i class="line">0元＞</i>
                </span>
                <span class="common-link">
                    累计保证金
                    <i class="line">0元＞</i>
                </span>
            </div>
            <bus-item :bgmData="[]" />
        </basics-card>

        <basics-card>
            <h5 class="h5">门店待办/我的待办</h5>
            <h6 class="h6">l 营销</h6>
            <bus-marketing :bgmData="[]" />
            <h6 class="h6">l 合同</h6>
            <bus-contract :bgmData="[]" />
            <h6 class="h6">l 财务</h6>
            <bus-finance :bgmData="[]" />
            <h6 class="h6">l 服务</h6>
            <bus-serve :bgmData="[]" />
        </basics-card>

        <div class="title-wrap">
            <strong class="strong-room">
                商铺房态图
                <span class="transaction">企业客户办理＞</span>
            </strong>
        </div>
        <bus-room :bgmData="[]" />
    </div>
</template>

<script>
import FilterData from '../filter-data.vue';
import BasicsCard from '@/components/Widget/basics-card.vue';
import BusCard from '../bussiness/bus-card.vue';
import BusItem from '../bussiness/bus-item.vue';
import BusMarketing from '../bussiness/bus-marketing.vue';
import BusContract from '../bussiness/bus-contract.vue';
import BusFinance from '../bussiness/bus-finance.vue';
import BusServe from '../bussiness/bus-serve.vue';
import BusRoom from '../bussiness/bus-room.vue';

export default {
    components: { FilterData, BasicsCard, BusCard, BusItem, BusMarketing, BusContract, BusFinance, BusServe, BusRoom },
    data() {
        return {
            loading: true
        };
    },
    mounted() {
        this.loadData();
    },
    methods: {
        loadData() {
            this.loading = true;
            setTimeout(() => {
                this.loading = false;
            }, 1200);
        },
        filterSubmit() {
            this.loadData();
        }
    }
};
</script>

<style lang="scss" scoped>
.bussiness-container {
    height: calc(100% - 68px);
    overflow-x: hidden;
    overflow-y: auto;
    margin-top: 12px;
    .h5 {
        font-size: 16px;
        font-weight: 800;
        color: #165dff;
    }
    .h6 {
        font-size: 14px;
        font-weight: 600;
        color: #333;
        margin: 20px 0 10px 0;
    }
    .title-wrap {
        display: flex;
        align-items: center;
        height: 30px;
        .strong-room {
            font-size: 15px;
            font-weight: 600;
            color: #1d2129;
            .i-area {
                color: #f53f3f;
                font-style: normal;
            }

            .i {
                color: #53bc63;
                font-style: normal;
            }
            .transaction {
                font-size: 13px;
                color: #165dff;
                margin-left: 20px;
                text-decoration: underline;
                cursor: pointer;
            }
        }
        .set {
            font-size: 13px;
            color: #1d2129;
            cursor: pointer;
        }
        .bail {
            font-size: 13px;
            color: #1d2129;
            .i-bail {
                color: #165dff;
                font-style: normal;
                text-decoration: underline;
                cursor: pointer;
            }
        }
    }
    .tips-wrap {
        margin: 20px 0 12px 0;
        .common-link {
            font-size: 13px;
            font-weight: 500;
            color: #1d2129;
            margin-right: 60px;
            .line {
                color: #f53f3f;
                text-decoration: underline;
                font-style: normal;
                cursor: pointer;
            }
        }
    }
}
</style>
